<template>
  <div>
    <el-drawer
      :modelValue="visible"
      direction="rtl"
      :size="drawerSize"
      @close="handleCancel('close')"
      :close-on-click-modal="false"
      :modal-class="classObj"
    >
      <template #header>
        <div class="ash_drawer_header">
          <div class="blueLine"></div>
          <div class="title">{{ t("common.advancedSearch") }}</div>
        </div>
      </template>
      <el-form :model="searchConfig.form" ref="formRef" label-width="auto">
        <el-row :gutter="20">
          <el-col v-for="item in searchConfig.formItems" :key="item.prop" :span="24">
            <el-form-item :label="item.label" :prop="item.prop">
              <component
                v-if="item.type === 'el-select'"
                :filterable="item.filterable"
                style="width: 100%"
                :is="item.type"
                v-model="searchConfig.form[item.prop]"
                v-bind="item.attrs"
                v-on="item.events"
              >
                <el-option
                  v-for="option in item.options"
                  :key="option[item.optionProps.key]"
                  :label="option[item.optionProps.label]"
                  :value="option[item.optionProps.value]"
                ></el-option>
              </component>
              <component
                v-else-if="item.type === 'el-tree-select'"
                :ref="item.ref"
                style="width: 100%"
                :is="item.type"
                :highlight-current="true"
                :filterable="item.filterable"
                v-model="searchConfig.form[item.prop]"
                v-bind="item.attrs"
                :data="item.options"
                v-on="item.events"
                :props="item.optionProps"
              ></component>
              <component
                v-else
                :filterable="item.filterable"
                style="width: 100%"
                :is="item.type"
                v-model="searchConfig.form[item.prop]"
                v-bind="item.attrs"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="footer_btn">
          <el-button @click="handleCancel('cancle')">{{ t("common.reset") }}</el-button>
          <el-button type="primary" @click="handleSubmit">{{
            t("common.confirm")
          }}</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="AdvanceSearch">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  searchConfig: {
    type: Object,
    required: true,
  },
  classObj: {
    type: String,
  },
  drawerSize: {
    type: String,
    default: "30%",
  },
});

const emit = defineEmits(["update:visible", "submit"]);
const formRef = ref(null);

const handleCancel = (key) => {
  // 关闭抽屉
  emit("update:visible", false);
  if (key == "cancle") {
    // 清空表单
    Object.keys(props.searchConfig.form).forEach((key) => {
      props.searchConfig.form[key] = "";
    });
    formRef.value.resetFields();
    emit("submit", { ...props.searchConfig.form });
  }
};

const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      emit("submit", { ...props.searchConfig.form });
      emit("update:visible", false);
    }
  });
};
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  border-bottom: 1px solid #dcdc;
  padding-bottom: 20px;
  margin-bottom: 0;
  .ash_drawer_header {
    display: flex;
    font-weight: 700;

    .blueLine {
      color: #1065ff;
      background: #1065ff;
      width: 5px;
      height: auto;
      border-radius: 3px;
      margin-right: 10px;
    }
    .title {
      color: #000;
    }
  }
}
:deep(.el-drawer__footer) {
  border-top: 1px solid #dcdc;
}
.footer_btn {
  flex: auto;
}
:deep(.el-form) {
  .el-form-item__label {
    // max-width: 200px; /* 你可以调整数值 */

    // /* 超出部分省略号 */
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;

    // /* 必须设定宽度或max-width 才能生效 */
    // display: inline-block;
  }
}
</style>
